<template>
  <div ref="dom" class="charts chart-bar"></div>
</template>

<script>
import { on, off } from '@/libs/tool'
export default {
  name: 'BarX',
  props: {
    value: Object,
    /***
       * value 对接后台返回格式为
       * {
        legend: ['北京', '上海'],                                                  ----> 图例
        category: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],           ----> x轴名称轴
        list: [                                                                   ----> y轴数据轴
          [120, 132, 101, 134, 90, 230, 210],
          [379, 268, 354, 269, 310, 478, 358]
        ]
      }
       ***/
    text: String,
    subtext: String,
    color: {
      type: Array,
      default: () => ['rgba(55, 194, 187, 1)', 'rgba(55, 194, 187, 1)']
    },
    barWidth: {
      type: Number,
      default: 8
    },
    gradient: {
      type: Boolean,
      default: true
    },
    legend: {
      type: Object,
      default: function () {
        return {
          show: true,
          top: '10px',
          align: 'center'
        }
      }
    },
    grid: {
      type: Object,
      default: function () {
        return { top: '15%', left: '3%', right: '5%', bottom: '1%' }
      }
    },
    tooltipStyle: {
      type: Object,
      default: function () {
        return { backgroundColor: 'rgba(1, 21, 43, 1)', borderColor: '#45A5E3' }
      }
    },
    dataZoom: {
      type: Array,
      default: () => []
    },
    interval: {
      type: String,
      default: 'auto'
    }
  },
  data() {
    return {
      dom: null
    }
  },
  methods: {
    setOption(value) {
      this.value = value
    },
    init() {
      // let category = Object.keys(this.value.list[0])
      // let dataArr = []
      // for(let i = 0 ;i < this.value.list.length; i++) {
      //   let data = Object.values(this.value.list[i])
      //   dataArr.push(data)
      // }
      const seriesData = []
      if (this.value.list) {
        for (let i = 0; i < this.value.list.length; i++) {
          seriesData.push({
            type: 'bar',
            name: this.value.legend[i],
            data: this.value.list[i],
            barWidth: this.barWidth, // 柱条的宽度，不设时自适应
            itemStyle: {
              normal: {
                // color: this.color[i],
                barBorderRadius: [0, 0, 0, 0],
                label: {
                  show: true,
                  position: 'inside',
                  formatter: function (p) {
                    return p.value > 0 ? p.value : ''
                  }
                }
              }
            }
          })
          if (this.gradient) {
            if (this.value.legend.length > 1) {
              seriesData[i].itemStyle.normal.color = require('echarts').graphic.LinearGradient(
                0,
                0,
                1,
                1,

                [
                  {
                    offset: 0,
                    // color: 'rgba(64,131,252,1)'
                    color: this.color[i][0]
                  },
                  {
                    offset: 1,
                    // color: 'rgba(0,222,255,1)'
                    color: this.color[i][1]
                  }
                ],
                false
              )
            } else {
              seriesData[i].itemStyle.normal.color = require('echarts').graphic.LinearGradient(
                0,
                0,
                1,
                1,

                [
                  {
                    offset: 0,
                    // color: 'rgba(64,131,252,1)'
                    color: this.color[0]
                  },
                  {
                    offset: 1,
                    // color: 'rgba(0,222,255,1)'
                    color: this.color[1]
                  }
                ],
                false
              )
            }
          }
        }
      }
      const option = {
        title: {
          text: this.text,
          subtext: this.subtext,
          x: 'center'
        },

        legend: {
          show: this.legend.show,
          data: this.value.legend,
          right: this.legend.right,
          top: this.legend.top,
          bottom: this.legend.bottom,
          icon: 'rect',
          itemWidth: 12,
          itemHeight: 8,
          textStyle: {
            color: '#fff',
            padding: [0, 0, 0, 4]
          }
        },
        grid: {
          top: this.grid.top,
          left: this.grid.left,
          right: this.grid.right,
          bottom: this.grid.bottom,
          containLabel: true
        },
        tooltip: {
          // 提示框
          show: true,
          trigger: 'axis', // 触发类型。            'axis' 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
          axisPointer: {
            // 坐标轴指示器配置项。
            type: 'none'
          },
          showContent: true, // 是否显示提示框浮层，默认显示。只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为false。
          renderMode: 'html',
          confine: false,
          // formatter: '{b}: {c}', // 折线图、柱状图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
          borderWidth: 1,
          borderRadius: 10,
          ...this.tooltipStyle
        },
        xAxis: {
          type: 'category',
          data: this.value.category,
          show: true,
          position: 'bottom',
          offset: 0, // X轴相对于默认位置的偏移
          name: '', // 坐标轴名称
          nameLocation: 'end',
          nameTextStyle: {
            // 坐标轴名称的文字样式
            color: 'red',
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            fontSize: 12,
            align: 'center',
            verticalAlign: 'middle'
          },
          nameGap: 15, // 坐标轴名称与轴线之间的距离
          nameRotate: 0, // 坐标轴名字旋转，角度值
          // min: 0,                                      //坐标轴刻度最小值
          // max: 0,                                      //坐标轴刻度最大值
          axisLine: {
            // 坐标轴轴线相关设置
            show: false // 是否显示坐标轴轴线
            // lineStyle: {
            //   // 坐标轴线样式
            //   color: '#366187',
            //   width: 1,
            //   type: 'solid'
            // }
          },
          axisTick: {
            // 坐标轴刻度相关设置
            show: false
            // lineStyle: {
            //   // 刻度线的样式设置
            //   color: '#989EAE',
            //   width: 1,
            //   type: 'solid'
            // }
          },
          axisLabel: {
            // 坐标轴刻度标签的相关设置
            show: true,
            interval: this.interval,
            inside: false,
            rotate: 0,
            color: 'rgba(0, 0, 0, 0.34)'
          },
          splitLine: {
            // 坐标轴在 grid 区域中的分隔线
            show: false
            // interval: 'auto',
            // lineStyle: {}
          }
        },
        yAxis: {
          type: 'value',
          show: true,
          name: '', // 坐标轴名称
          nameLocation: 'end',
          nameTextStyle: {},
          minInterval: 1, // 设置成1保证坐标轴分割刻度显示成整数。
          axisLine: {
            // 坐标轴轴线相关设置
            show: false
            // lineStyle: {
            //   color: '#366187'
            // }
          },
          axisTick: {
            // 坐标轴刻度相关设置
            show: false
          },
          axisLabel: {
            interval: 0, // 强制展示所有y轴刻度标签
            show: true,
            color: 'rgba(0, 0, 0, 0.34)'
          },
          splitLine: {
            // 坐标轴在 grid 区域中的分隔线
            show: true,
            lineStyle: {
              color: 'rgba(229, 229, 229, 1)',
              width: 1,
              type: 'solid'
            }
          }
        },
        dataZoom: this.dataZoom,
        series: seriesData
      }
      const echarts = require('echarts')
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
      this.dom.setOption(option)
    },
    resize() {
      this.dom.resize()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
      on(window, 'resize', this.resize)
    })
  },
  beforeDestroy() {
    off(window, 'resize', this.resize)
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (this.dom) {
          if (newVal) {
            this.setOption(newVal)
            this.init()
          } else {
            this.setOption(oldVal)
          }
        } else {
          this.init()
        }
      },
      deep: true // 对象内部属性的监听，关键。
    },
    dataZoom: {
      handler(newVal, oldVal) {
        this.init()
      },
      deep: true // 对象内部属性的监听，关键。
    }
  }
}
</script>

<style scoped lang="less">
.charts {
  width: 100%;
  height: 100%;
}
</style>
